<template>
  <view>
    <view style="padding-bottom: 80px" v-if="listData.length > 0">
      <view class="cu-card-wrap" v-for="item in listData" :key="item.projectInfoId">
        <view class="body-wrap">
          <view class="content-wrap">
            <view class="label">项目编号：</view>
            <view class="value">{{ item.projectCode }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">项目名称：</view>
            <view class="value">{{ item.projectName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">项目负责部门：</view>
            <view class="value">{{ item.deptName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">项目负责人：</view>
            <view class="value">{{ item.directorName }}</view>
          </view>
          <view class="content-wrap">
            <view class="label">监护人：</view>
            <view class="value">{{ item.guardianName }}</view>
          </view>
        </view>
        <view class="footer-wrap">
          <view class="button-wrap button-wrap-todo">
            <view class="flex justify-end w-full">
              <view class="button" @click="handleChoose(item)">选择</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <Empty></Empty>
    </view>
    <filter-import-project ref="cuFilter" @submit="filterSubmit" />
  </view>
</template>

<script>
import Empty from '@/components/cu-empty/index.vue'
import { queryImportWorkProjectList } from '@/api/spw/project'
import FilterImportProject from './components/FilterImportProject.vue'
export default {
  components: {
    FilterImportProject,
    Empty
  },
  data() {
    return {
      listData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isFinished: false,
      loading: false,
      searchParams: {}
    }
  },
  // 筛选按钮点击
  onNavigationBarButtonTap(e) {
    this.$refs.cuFilter.toggle()
  },
  onLoad() {
    this.initData()
  },
  onPullDownRefresh() {
    this.initData()
  },
  onReachBottom() {
    this.getList()
  },
  methods: {
    handleChoose(item) {
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('project-ticket:import:success', { ...item })
      uni.navigateBack()
    },
    filterSubmit(params) {
      this.searchParams = {
        ...params
      }
      this.initData()
    },
    initData() {
      this.listData = []
      this.isFinished = false
      this.loading = false
      this.pageNum = 1
      this.pageSize = 10
      this.getList()
    },
    async getList() {
      if (this.isFinished || this.loading) {
        return
      }
      this.loading = true
      const data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.searchParams
      }

      const res = await queryImportWorkProjectList(data)
      if (data.pageNum === 1) {
        this.listData = res.rows
      } else {
        this.listData.push(...res.rows)
      }
      this.isFinished = res.rows.length < this.pageSize
      this.loading = false
      uni.stopPullDownRefresh()
      this.pageNum++
    }
  }
}
</script>

<style lang="scss" scoped>
.submit-group {
  background: #fff;
  z-index: 9;
  padding: 10px 20px;
  .u-button {
    width: 100%;
  }
}
.button-wrap-todo {
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .button-wrap-left {
    display: flex;
    align-items: center;

    > view {
      margin-right: 16rpx;
      margin-left: 0;
    }
  }
}

.button-wrap {
  .status-button {
    border: 1rpx solid #88b4c4;
    color: #88b4c4;

    &.active {
      border: 1rpx solid #c87c32;
      color: #c87c32;
    }
  }
}

.cu-card-wrap {
  margin-bottom: 24rpx;
  position: relative;

  &:first-child {
    margin-top: 24rpx;
  }
}
</style>
